<template>

  <div style="padding: 16px">
    <a-card style="height: min-content;margin-bottom: 16px">
      <span style="font-size: 16px;font-weight: bolder">基本信息</span>
      <a-divider style="margin: 8px"/>
      <div style="display: flex;align-items: center">
        <image-preview :src="schoolInfo.badgeSrc" style="width: 48px;height: 48px;margin-right: 40px"/>

        <div style="display: flex;flex-direction: column;width: 160px">
          <span style="color: #8b8b8b;margin-bottom: 4px;">校名</span>
          <span style="color: black;font-size: 16px">{{ schoolInfo.name }}</span>
        </div>

        <div style="display: flex;flex-direction: column;width: 160px">
          <span style="color: #8b8b8b;margin-bottom: 4px;">地区</span>
          <span style="color: black;font-size: 16px">云南</span>
        </div>

        <div style="display: flex;flex-direction: column;width: 160px">
          <span style="color: #8b8b8b;margin-bottom: 4px;">学生数</span>
          <span style="color: black;font-size: 16px">{{ schoolInfo.stuNum }}</span>
        </div>
      </div>
    </a-card>

    <a-card style="height: min-content;margin-bottom: 16px">
      <span style="font-size: 16px;font-weight: bolder">基本信息</span>
      <a-divider style="margin: 8px"/>
      <div id="canvasContainer" style="display: flex;height: 320px">
        <div style="flex: 1;width: 0px;display: flex;flex-direction: column">
          <div style="width: 100%;flex: 1;display: flex;align-items: center;justify-content: center;overflow-y: scroll">
            <el-table style="width: 100%;height: 100%" :data="selectStuList">
              <el-table-column label="头像" align="center" prop="avatarSrc" width="100">
                <template #default="scope">
                  <image-preview :src="scope.row.avatarSrc" :width="50" :height="50"/>
                </template>
              </el-table-column>
              <el-table-column label="姓名" align="center" prop="name" />
              <el-table-column label="赛中编号" align="center" prop="no" />
              <el-table-column label="性别" align="center" prop="sex">
                <template #default="scope">
                  <dict-tag :options="sys_user_sex" :value="scope.row.sex"/>
                </template>
              </el-table-column>
              <el-table-column  width="180"  label="学号" align="center" prop="stuNo" />
              <el-table-column label="班级名" align="center" prop="className" />
              <el-table-column label="民族" align="center" prop="nation" />

              <el-table-column label="出生年月" align="center" prop="birth" />
              <el-table-column label="生源地" align="center" prop="birthPlace" />
              <el-table-column width="200" label="身份证号" align="center" prop="cardId" />
            </el-table>
          </div>
          <a-button @click="showLottery">前去抽取</a-button>
        </div>
        <canvas style="height: 100%;flex: 1;width: 0px" id="fvZJhXxrvdywXDXIRPYwtBazDgAjWpjZ" class="charts"></canvas>
      </div>

    </a-card>

    <a-card style="height: min-content;margin-bottom: 16px">
      <span style="font-size: 16px;font-weight: bolder">基本信息</span>
      <a-divider style="margin: 8px"/>

      <a-table
          :pagination="false"
          :columns="columns2"
          :data-source="data2"
          bordered
          size="middle"
          :scroll="{ x: '2000px'}">
        <template #bodyCell="{ column ,record}">
          <template style="" v-if="true">
            <div style="display:flex;flex-direction: column;justify-content: start;height: 100%"
                 v-if="record[column.key]">
              <!--              <div style="height: 180px">{{record[column.key]}}</div>-->

              <div style="display: flex;flex-direction: column" v-if="record[column.key].type==1">
                <span style="margin-bottom: 8px">人员组成：</span>
                <div v-if="record[column.key].cq">
                  <div :style="{'background':item==='1'?'#65c5ff':'#ffa1c7'}"
                       style="height: 40px;margin-bottom: 8px;border-radius: 8px;display: flex;align-items: center;justify-content: space-between;padding: 0px 8px"
                       v-for="(item,index) in getPersonList(record[column.key].members)">

                    <span>罗建国：</span>
                    <span style="font-size: 24px;font-weight: bolder">{{ item }}</span>
                  </div>
                </div>
              </div>

              <div style="display: flex;flex-direction: column" v-if="record[column.key].type==2">
                <span style="margin-bottom: 8px">团队项目：</span>
                <div v-if="record[column.key].cq">
                  <div
                      style="height: 40px;margin-bottom: 8px;border-radius: 8px;background: #ffeca8;display: flex;align-items: center;justify-content: space-between;padding: 0px 8px"
                      v-if="record[column.key].no">
                    <span>团队签号：</span>
                    <span style="font-size: 24px;font-weight: bolder">{{ record[column.key].no }}</span>
                  </div>
                </div>
              </div>
            </div>
          </template>
        </template>
      </a-table>
    </a-card>
  </div>
</template>

<script>
import qiunVueUcharts from '@qiun/ucharts'
import { listSchool, getSchool, delSchool, addSchool, updateSchool } from "@/api/business/school";
import {confirmList} from "../../../api/business/student";
import ElementResizeDetector from 'element-resize-detector';
export default {
  name: "index",
  components: {
    qiunVueUcharts
  },
  data() {
    const router = useRouter();
    const width = 80;
    const { proxy } = getCurrentInstance();
    const { base_confirm_status, sys_user_sex } = proxy.useDict('base_confirm_status', 'sys_user_sex');
    const columns2 = [
      {
        title: '专业教育理论知识',
        dataIndex: 'ZYJYLLZS',
        key: 'ZYJYLLZS',
        width: width
      },
      {
        title: '专业教学能力',
        children: [
          {
            title: '队列队形',
            dataIndex: 'DLDX',
            key: 'DLDX',
            width: width,
          },
          {
            title: '教学设计',
            dataIndex: 'JXSJ',
            key: 'JXSJ',
            width: width
          },
          {
            title: '片段教学',
            dataIndex: 'PDJX',
            key: 'PDJX',
            width: width
          },
        ],
      },
      {
        title: '专业运动技能',
        dataIndex: 'ZYYDJN',
        key: 'ZYYDJN',
        width: width,
        children: [
          {
            title: '田径(抽人)',
            dataIndex: 'TJ',
            key: 'TJ',
            width: width,
            children: [
              {
                title: '60米跑(3男1女)',
                dataIndex: 'LSMP',
                key: 'LSMP',
                width: width,
              },
              {
                title: '跳高(1男)',
                dataIndex: 'TG',
                key: 'TG',
                width: width
              },
              {
                title: '跳远(1女)',
                dataIndex: 'TY',
                key: 'TY',
                width: width
              },
            ],
          },
          {
            title: '体操',
            dataIndex: 'TC',
            key: 'TC',
            width: width,
            children: [
              {
                title: '健身操',
                dataIndex: 'JSC',
                key: 'JSC',
                width: width,
              },
              {
                title: '跳绳',
                dataIndex: 'TS',
                key: 'TS',
                width: width
              },
              {
                title: '单杠和技巧(抽人)',
                dataIndex: 'DGHJQ',
                key: 'DGHJQ',
                width: width,
                children: [
                  {
                    title: '单杠(3人)',
                    dataIndex: 'DG',
                    key: 'DG',
                    width: width,
                  },
                  {
                    title: '技巧(3人)',
                    dataIndex: 'JQ',
                    key: 'JQ',
                    width: width
                  }
                ],

              },
            ],
          },
          {
            title: '武术',
            dataIndex: 'WS',
            key: 'WS',
            width: width
          },
          {
            title: '足篮排(抽人)',
            dataIndex: 'ZLP',
            key: 'ZLP',
            width: width,
            children: [
              {
                title: '足球(2人)',
                dataIndex: 'ZQ',
                key: 'ZQ',
                width: width,
              },
              {
                title: '篮球(2人)',
                dataIndex: 'LQ',
                key: 'LQ',
                width: width
              },
              {
                title: '排球(2人)',
                dataIndex: 'PQ',
                key: 'PQ',
                width: width
              },
            ],

          },
        ],
      },
    ];
    const data2 = [
      {
        'ZYJYLLZS': {
          type: 1,
          name: '专业教育理论知识',
          cq: false,
        },
        'DLDX': {
          type: 2,
          name: '队列队形',
          cq: true,
          no: 12,
        },
        'JXSJ': {
          type: 1,
          name: '教学设计',
          cq: false,
        },
        'PDJX': {
          type: 1,
          name: '片段教学'
        },
        'LSMP': {
          type: 1,
          name: '60米跑',
          members: '3+1',
          cq: true,
        },
        'TG': {
          type: 1,
          name: '跳高',
          members: '1+0',
          cq: true,
        },
        'TY': {
          type: 1,
          name: '跳远',
          members: '0+1',
          cq: true,
        },
        'JSC': {
          type: 2,
          name: '健身操',
          members: '6',
          cq: true,
        },
        'TS': {
          type: 2,
          name: '跳绳',
          members: '6',
          cq: true,
        },
        'DG': {
          type: 1,
          name: '单杠',
          members: '3',
          cq: true,
        },
        'JQ': {
          type: 1,
          name: '技巧',
          members: '3',
          cq: true,
        },
        'WS': {
          type: 2,
          name: '武术',
          cq: true,
        },
        'ZQ': {
          type: 1,
          name: '足球',
          members: '2',
          cq: true,
        },
        'LQ': {
          type: 1,
          name: '篮球',
          members: '2',
          cq: true,
        },
        'PQ': {
          type: 1,
          name: '排球',
          members: '2',
          cq: true,
        },
      }
    ];
    return {
      chartData: {},
      columns2,
      data2,
      router,
      schoolInfo: {},
      selectStuList:[],
      sys_user_sex,
      base_confirm_status
    }
  },
  mounted() {
    this.getServerData();
    // 使用$route.params获取路由参数
    let schoolId = this.$route.query.schoolId;
    console.log('用户ID:', schoolId);
    this.getSchoolInfo(schoolId);
    this.confirmList(schoolId);
    let that = this;
    let timer = null;
    ElementResizeDetector().listenTo(document.getElementById("canvasContainer"),function (element) {
      console.log("resize");

      console.log("resize");
      if(timer != null){
        clearTimeout(timer);
      }
      timer = setTimeout(()=>{
        that.getServerData();
      },100)
    });
  },
  methods: {
    confirmList(schoolId){
      let that = this;
      confirmList(schoolId,2).then(response => {
        console.log(response)
        that.selectStuList = response.rows;
      });
    },
    getSchoolInfo(schoolId){
      let that = this;
      getSchool(schoolId).then(response => {
        console.log(response)
        that.schoolInfo = response.data;
      });
    },
    showLottery(item) {
      console.log(item);
      this.router.push({path: "/lottery",query: {schoolId:this.schoolInfo.id}});
    },
    getPersonList(members) {
      if (members == null) return;
      let result = '';
      if (!members.includes('+')) {
        for (let i = 0; i < Number.parseInt(members); i++) {
          result += '0'
        }
      } else {
        let strs = members.split('+');
        for (let i = 0; i < Number.parseInt(strs[0]); i++) {
          result += '1'
        }
        for (let i = 0; i < Number.parseInt(strs[1]); i++) {
          result += '2'
        }
      }
      return result;
    },
    getServerData() {
      const canvas = document.getElementById("fvZJhXxrvdywXDXIRPYwtBazDgAjWpjZ");
      let data = {
        categories: ["维度1", "维度2", "维度3", "维度4", "维度5", "维度6"],
        series: [
          {
            name: "成交量1",
            data: [90, 110, 165, 195, 187, 172]
          },
        ]
      };
      const ctx = canvas.getContext("2d");

      canvas.width = canvas.offsetWidth;
      canvas.height = canvas.offsetHeight;
      new qiunVueUcharts({
        type: "radar",
        context: ctx,
        width: canvas.width,
        height: canvas.height,
        categories: data.categories,
        series: data.series,
        animation: true,
        background: "#FFFFFF",
        color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
        padding: [5, 5, 5, 5],
        dataLabel: false,
        enableScroll: false,
        legend: {
          show: true,
          position: "right",
          lineHeight: 25
        },
        extra: {
          radar: {
            gridType: "circle",
            gridColor: "#CCCCCC",
            gridCount: 3,
            opacity: 0.2,
            max: 200,
            labelShow: true
          }
        }
      });


    },
  }
}
</script>

<style scoped>

</style>
